

function Painter(ctx){
    var context = ctx;
    var center = {};
        
    var init = function(){    
        center[0] = context.canvas.width/2;
        center[1] = context.canvas.height/2;
    };
                  
    
    this.drawCircle = function(){        
        context.beginPath();        
        context.arc(center[0], center[1], 50, 0, Math.PI*2);
        context.stroke();
    };
    
    this.drawArc = function(){
        var radius = 50;
        context.beginPath();        
        context.moveTo(center[0], center[1]+radius);
        context.lineTo(center[0], center[1]);
        context.lineTo(center[0]+radius, center[1]);
        context.arc(center[0], center[1], radius, 0, 90 * (Math.PI/180), false);
        context.stroke();        
    };
    
    this.drawRectangle = function(){
        var w = 100;
        var h = 60;
        var x = center[0]-w/2;
        var y = center[1]-h/2;
        context.beginPath();        
        context.rect(x,y,w,h);
        context.stroke();
    };
    
    this.drawImage = function(){
        var image = new Image();
        image.onload = function(){
            context.drawImage(image, center[0]-image.width/2, center[1]-image.height/2);
        };
        image.src = "./img/dextra_logo.png";
    };
    
    this.drawText = function(){        
        context.font = "30px Arial";
        context.textAlign = "center";
        context.fillText("Hello, Canvas!", center[0], center[1]);
        context.strokeText("Hello, Canvas!", center[0], center[1]+32);    
    };
    
    this.drawPolygon = function(){
        var sides = 8;
        var radius = 50;
        var a  = (Math.PI * 2)/sides;
        
        context.translate(center[0], center[1]);
        context.beginPath();        
        for (var i = 0; i < sides; i++) {
            ctx.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));
        }
        context.closePath();
        context.fillStyle = "rgba(255,0,0,0.5)";
        context.fill();
        context.stroke();            
    };
    
    this.drawCurves = function(){
    
        context.beginPath();
        context.translate(30,130);
        context.moveTo(170, 80);
        context.bezierCurveTo(130, 100, 130, 150, 230, 150);
        context.bezierCurveTo(250, 180, 320, 180, 340, 150);
        context.bezierCurveTo(420, 150, 420, 120, 390, 100);
        context.bezierCurveTo(430, 40, 370, 30, 340, 50);
        context.bezierCurveTo(320, 5, 250, 20, 250, 50);
        context.bezierCurveTo(200, 5, 150, 20, 170, 80);
        
        context.lineWidth = 4;
        context.strokeStyle = "rgba(64,64,128,1.0)";        
        context.fillStyle = "rgba(128,128,255,1.0)";
        context.fill();
        context.stroke();
    
    };
    
    init();
}



function main(){
    var context = document.getElementById('myCanvas').getContext('2d');
    
    var painter = new Painter(context);
    
    //painter.drawCircle();
    //painter.drawArc();
    //painter.drawRectangle();
    //painter.drawText();    
    //painter.drawPolygon();
    //painter.drawCurves();
    painter.drawImage();        
    
}

